<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤设置</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<style>
		.layui-form-label {
			width: calc((100% - 130px) / 4);
			min-width: 140px;
			padding: 0 5px;
			margin-right: 10px;
		}

		.layui-form-label input,
		.layui-inline input {
			text-align: center;
		}

		.kaoqin {
			float: left;
			position: absolute;
			margin-top: 5px;
			margin-left: 10px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.layui-inline {
			margin-bottom: 0 !important;
			width: calc((100% - 130px) / 4);
			float: left;
			min-width: 140px;
			padding: 0 5px;
		}

		.offer {
			width: 150px;
			height: 45px;
			text-align: center;
			padding-top: 15px;
			padding-left: 15px;
			font-size: 18px;
			line-height: 35px;
			color: white;
			margin-left: 20%;
			display: inline-block;
			background: url(../image/add.png) no-repeat center center;
			cursor: pointer;
		}

		.settime_span {
			float: right;
			margin-right: 20px;
			font-size: 35px;
			color: #999;
			line-height: 35px;
		}

		.attendance_item {
			border: 1px solid #ddd;
			padding: 10px;
			border-radius: 5px;
		}

		.addItem {
			width: 150px;
			height: 45px;
			text-align: center;
			padding-top: 15px;
			font-size: 18px;
			line-height: 35px;
			color: white;
			margin-left: 10%;
			display: inline-block;
			background: url(../image/add_time.png) no-repeat center center;
			cursor: pointer;
		}

		.attendance_item {
			background-color: #0080cf;
			color: white;
		}

		.layui-col-md6 {
			margin-left: 18%;
			min-width: 800px;
		}

		.time-state {
			width: 70px;
			float: left;
		}

		.time-state input {
			display: none;
		}

		.time-state label {
			position: relative;
		}

		.time-state label::before {
			display: inline-block;
			content: "";
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 1px solid rgb(219, 219, 219);
			background-color: white;
			margin-right: 6px;
		}

		.time-state input:checked+label::before {
			background-color: #71a471;
		}

		.time-state input:checked+label::after {
			display: inline-block;
			content: "";
			width: 6px;
			height: 6px;
			border-radius: 50%;
			position: absolute;
			left: 6px;
			bottom: 6px;
		}
	</style>
</head>

<body>
	<br>
	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item attendance_item" v-for="(schooltime,index) in schoolTimes" :key="index"
				v-if="schooltime.status===status">
				<span class="settime_span" @click="delItem(index)">x</span>

				<div class="layui-form-label">
					<select v-model="schooltime.type" class="layui-input">
						<option :value="undefined" disabled="disabled">请选择状态</option>
						<option :value="1">进校</option>
						<option :value="0">离校</option>
						<option :value="2">迟到</option>
						<option :value="3">早退</option>
					</select>
				</div>
				<div class="layui-form-label">
					<input class="layui-input" placeholder="请输入打卡时间段名" v-model="schooltime.name">
				</div>
				<div class="layui-inline">
					<img src="../image/clock.png" alt="" class="kaoqin">
					<input class="layui-input" :id="'start'+index" placeholder="打卡开始时间" v-model="schooltime.startTime">
				</div>
				<div class="layui-inline">
					<img src="../image/clock.png" alt="" class="kaoqin">
					<input class="layui-input" :id="'end'+index" placeholder="打卡结束时间" v-model="schooltime.endTime">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="offer" @click="addItem">添加时间段</div>
				<div class="addItem" @click="sendMessage">保存</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="../lib/laydate/laydate.js"></script>
	<script src="../js/common.js"></script>
	<script>

		var app = new Vue({
			el: "#vue-root",
			data: {
				schoolTimes: [],
				status: [null, false, true][params().status - 1]
			},
			created: function () {
				var id = top_params().id;
				var _this = this;
				axios.get('/pc/period/' + id).then(function (res) {
					_this.schoolTimes = res.data;
					_this.laydate();
				});
			},
			methods: {
				sendMessage: function () {
					axios.post('/pc/period/' + top_params().id, this.schoolTimes).then(function () {
						alert('成功');
					});
				},
				delItem: function (index) {
					this.schoolTimes.splice(index, 1);
				},
				addItem: function () {
					this.schoolTimes.push({ type: 1, status: this.status });
					this.laydate();
				},
				laydate: function () {
					var _this = this;
					this.$nextTick(function () {
						for (var i = 0; i < _this.schoolTimes.length; i++) {
							laydate.render({
								i: i,
								elem: '#start' + i,
								type: 'time',
								format: 'HH:mm',
								done: function (value, date, endDate) {
									_this.schoolTimes[this.i].startTime = value;
								}
							});
							laydate.render({
								i: i,
								elem: '#end' + i,
								type: 'time',
								format: 'HH:mm',
								done: function (value, date, endDate) {
									_this.schoolTimes[this.i].endTime = value;
								}
							});
						}
					});
				}
			}

		})
	</script>
</body>

</html>